<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<%@include file="WEB-INF/jspf/header.jspf"%>
<%
            String notice1 = (String)request.getAttribute("notice1");
            if (notice1 == null) {
                notice1 = "";
            }
%>

<link href="register.css" rel="stylesheet" type="text/css" />

<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<script src="SpryAssets/SpryValidationTextField.js"
type="text/javascript"></script>
<link href="SpryAssets/SpryValidationTextField.css" rel="stylesheet"
      type="text/css" />

<script language="javascript">
    var XMLHttpRequestObject = false;

    if (window.XMLHttpRequest) {

        XMLHttpRequestObject = new XMLHttpRequest();

    } else if (window.ActiveXObject) {

        XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");

    }



    function checkUserNameExist() {

        var username = document.getElementById("iusername");
        var value0 = username.value;

        var url = "CheckUsernameAjaxServlet?loginName=" + value0 ;
       
        if(XMLHttpRequestObject) {

            XMLHttpRequestObject.open("GET", url, true);

            XMLHttpRequestObject.onreadystatechange = function(){
                if (XMLHttpRequestObject.readyState == 4 &&

                    XMLHttpRequestObject.status == 200) {

                    var text = XMLHttpRequestObject.responseText;

                    var sname = document.getElementById("susername");
                    sname.innerHTML = text;

                }

            }
            XMLHttpRequestObject.send(null);

        }


    }

    function checkPassExist() {

        var pass1 = document.getElementById("ipass1");
        var value0 = pass1.value;
        var pass2 = document.getElementById("ipass2");
        var value1 = pass2.value;

        var url = "CheckPassAjaxServlet?pass=" + value0 + "&pass2=" + value1;
            //+ "&pass=" + value1 + "&pass2="+ value2 + "&email=" + value3;

        if(XMLHttpRequestObject) {

            XMLHttpRequestObject.open("GET", url, true);

            XMLHttpRequestObject.onreadystatechange = function(){
                if (XMLHttpRequestObject.readyState == 4 &&

                    XMLHttpRequestObject.status == 200) {

                    var text = XMLHttpRequestObject.responseText;

                    var spass = document.getElementById("spass");
                    spass.innerHTML = text;

                }

            }
            XMLHttpRequestObject.send(null);
        }
    }

    function checkEmailExist() {

        var email = document.getElementById("iemail");
        var value1 = email.value;

        var url = "CheckEmailAjaxServlet?email=" + value1;

        if(XMLHttpRequestObject) {

            XMLHttpRequestObject.open("GET", url, true);

            XMLHttpRequestObject.onreadystatechange = function(){
                if (XMLHttpRequestObject.readyState == 4 &&

                    XMLHttpRequestObject.status == 200) {

                    var text = XMLHttpRequestObject.responseText;

                    var semail = document.getElementById("semail");
//                    alert(text);
                    semail.innerHTML = text;

                }

            }
            XMLHttpRequestObject.send(null);

        }
    }

</script>
</head>
<body>
    <div id="dangky">
        <form action="RegisterServlet" method="post" >

            <div class="tieuDeDangKy">Đăng ký Thành Viên:</div>
            <%=notice1%>
            <div class="lbNameLogin"><label>Tên đăng nhập:</label></div>
            <div class="textFileNameLogin"><span id="sprytextfield1"><input
                        name="loginName" type="text" size="35" id="iusername"/>
                    <span id="susername"></span> <span class="textfieldRequiredMsg">*</span></span></div>
            <div class="labelPass"><label>Mật khẩu : </label></div>
            <div class="textFilePass"><span id="sprytextfield2"><input
                        onfocus="return checkUserNameExist()" id="ipass1" name="pass" type="password" size="35" />
                    <span id="spass"></span> <span class="textfieldRequiredMsg">*</span></span></div>
            <div class="labelPass"><label>Nhập lại MK: </label></div>
            <div class="textFilePass"><span id="sprytextfield3"><input
                      name="pass2" id="ipass2" type="password" size="35" /> <span
                        class="textfieldRequiredMsg">*</span></span></div>
            <div class="labelPass"><label>Email: </label></div>
            <div class="textFilePass"><span id="sprytextfield4">
                    <input onfocus="return checkPassExist()"
                        name="email" type="text" size="35" id="iemail" />
                    <span id ="semail"></span> <span class="textfieldRequiredMsg">*</span></span></div>
            <div class="labelPass"><label>Họ Tên:</label></div>
            <div class="textFilePass"><input onfocus="return checkEmailExist()" name="fullName" type="text"
                                                 size="35" /> </div>


            <div class="labelPass">Mã xác nhận:<div id="maxacnhan">
            <img src="kapatcha.jpg" width="200" height="60" id="kaptchaImage" onclick="document.location.reload()"/></div>
          </div>
        
             
			<div class="labelPass"><label>Nhập mã XN:</label></div>
            <div class="textFilePass"><input onfocus="return checkUserNameExist()" name="kaptcha" type="text"
                                                 size="35" /> </div>

          <div class="labelPass"><input name="dangKy" type="submit"
                                          id="dangKy" value="Đăng Ký" /></div>
            <div class="buttunReSet"><input name="reSet" type="reset"
                                            id="reSet" value="ReSet" /></div>

        </form>

    </div>
    <script type="text/javascript">
       // <!--
        var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
        var MenuBar2 = new Spry.Widget.MenuBar("MenuBar2", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
        var sprytextfield1 = new Spry.Widget.ValidationTextField("sprytextfield1","none", {validateOn : [ "blur" ]  });
        var sprytextfield3 = new Spry.Widget.ValidationTextField("sprytextfield3","none", {validateOn : [ "blur" ]  });
        var sprytextfield2 = new Spry.Widget.ValidationTextField("sprytextfield2","none", {validateOn : [ "blur" ]  });
        var sprytextfield4 = new Spry.Widget.ValidationTextField("sprytextfield4","none", {validateOn : [ "blur" ]  });
        //-->
    </script>
    <%@include file="WEB-INF/jspf/footer.jspf"%>